<template>
  <div class="app-container">
    <wise-crud ref="wiseCrud" :urls="urls" :fields="fields" :filters="filters" :handle="handle">
      <template v-slot:handle="slotProps">
        <el-button type="info" size="small" round @click.native.prevent="viewHandle(slotProps.row)">查看</el-button>
      </template>
    </wise-crud>

    <el-dialog title="查看" :visible.sync="dialog" width="40%" @closed="handleClose">
      <el-row
        v-for="(item, index) in obj.type == 1 ? formItemsB : obj.type == 2 ? formItems : []"
        :key="index"
        type="flex"
        align="middle"
        justify="center"
        class="mr-10"
      >
        <el-col v-if="item.image" :span="12" class="content-middle">
          <div class="type-name">{{ item.typeName }}</div>
          <img :src="item.image">
        </el-col>
        <el-col :span="12">
          <div v-for="(i, x) in item.list" :key="x">{{ i.label }}：{{ obj[i.prop] }} {{ i.unit }}</div>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialog = false">取 消</el-button>
        <el-button type="primary" @click="dialog = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import WiseCrud from '@/components/Crud/wiseCrud'
import {
  postHandle
} from '@/api'
export default {
  name: 'WarehouseManage',
  components: {
    WiseCrud
  },
  data() {
    return {
      handle: [],
      urls: {
        list: '/api/v1/welder-sbtx-second/bevel',
        show: '/api/v1/welder-sbtx-second/bevel/show/'
      },
      fields: [{
        label: '类型',
        prop: 'username',
        type: 'render',
        use: ['table', 'view'],
        tableRender: (h, row, index) => {
          return h('div', row.type === 1 ? 'B型套筒' : '换管')
        },
        viewRender: (h, item, object) => {
          return h('div', object.type === 1 ? 'B型套筒' : '换管')
        }
      },
      {
        label: '操作',
        type: 'handle',
        use: ['table'],
        handle: [],
        tableWidth: 80
      }
      ],
      obj: {},
      dialog: false,
      formItemsB: [{
        typeName: '横焊缝一：',
        image: require('@/assets/img/hanfeng.png'),
        list: [{
          label: 'a',
          prop: 'sleeveTransverseOneA',
          unit: '度'
        },
        {
          label: 'c',
          prop: 'sleeveTransverseOneC',
          unit: 'mm'
        },
        {
          label: 'p',
          prop: 'sleeveTransverseOneP',
          unit: 'mm'
        },
        {
          label: 't',
          prop: 'sleeveTransverseOneT',
          unit: 'mm'
        }
        ]
      },
      {
        typeName: '横焊缝二：',
        image: require('@/assets/img/hanfeng.png'),
        list: [{
          label: 'a',
          prop: 'sleeveTransverseTwoA',
          unit: '度'
        },
        {
          label: 'c',
          prop: 'sleeveTransverseTwoC',
          unit: 'mm'
        },
        {
          label: 'p',
          prop: 'sleeveTransverseTwoP',
          unit: 'mm'
        },
        {
          label: 't',
          prop: 'sleeveTransverseTwoT',
          unit: 'mm'
        }
        ]
      },
      {
        typeName: '角焊缝一：',
        image: require('@/assets/img/jiaohan1.png'),
        list: [{
          label: 's',
          prop: 'sleeveHornOneS',
          unit: 'mm'
        },
        {
          label: 'b',
          prop: 'sleeveHornOneB',
          unit: 'mm'
        },
        {
          label: 't',
          prop: 'sleeveHornOneT',
          unit: 'mm'
        }
        ]
      },
      {
        typeName: '角焊缝二：',
        image: require('@/assets/img/jiaohan2.png'),
        list: [{
          label: 's',
          prop: 'sleeveHornTwoS',
          unit: 'mm'
        },
        {
          label: 'b',
          prop: 'sleeveHornTwoB',
          unit: 'mm'
        },
        {
          label: 't',
          prop: 'sleeveHornTwoT',
          unit: 'mm'
        }
        ]
      }
      ],
      formItems: [{
        typeName: '横焊缝一：',
        image: require('@/assets/img/huanguan.png'),
        list: [{
          label: 'a',
          prop: 'tubeChangeTransverseOneA',
          unit: '度'
        },
        {
          label: 'c',
          prop: 'tubeChangeTransverseOneC',
          unit: 'mm'
        },
        {
          label: 'p',
          prop: 'tubeChangeTransverseOneP',
          unit: 'mm'
        },
        {
          label: 't',
          prop: 'tubeChangeTransverseOneT',
          unit: 'mm'
        }
        ]
      },
      {
        typeName: '横焊缝一：',
        image: require('@/assets/img/huanguan.png'),
        list: [{
          label: 'a',
          prop: 'tubeChangeTransverseTwoA',
          unit: '度'
        },
        {
          label: 'c',
          prop: 'tubeChangeTransverseTwoC',
          unit: 'mm'
        },
        {
          label: 'p',
          prop: 'tubeChangeTransverseTwoP',
          unit: 'mm'
        },
        {
          label: 't',
          prop: 'tubeChangeTransverseTwoT',
          unit: 'mm'
        }
        ]
      }
      ]
    }
  },
  computed: {
    spaceId() {
      return this.$store.getters.spaceId
    },
    filters() {
      return [{
        field: 'spaceId',
        operator: 'EQUALS',
        value: this.spaceId
      }]
    }
  },
  methods: {

    viewHandle(row) {
      postHandle(this.urls.show + row.id).then(res => {
        this.obj = res.result
      })
      this.dialog = true
    },
    handleClose() {
      this.obj = {}
    }
  }
}
</script>

<style lang="less" scoped>
  .mr-10 {
    margin: 10px 0;
  }

  .content-middle {
    text-align: center;
  }

  .content-middle+.el-col {
    &>div {
      margin-bottom: 15px;
    }
  }

  .type-name {
    margin-bottom: 10px;
  }
</style>
